<template>
	<div 
	v-if="orderResult"
	class="home-pay-result-wrap" >
		<van-nav-bar
		  title="付款结果"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		<!-- 成功 -->
		<div 
		v-if="status == 1"
		class="result-box" >
			<img class="pay-icon" :src="paySuccessIcon" >
			<div class="pay-order-desc" >订单支付成功</div>
			<div class="pay-type" >支付方式：<span>{{ orderResult.pay_title }}</span></div>
			<div class="pay-type" >支付金额：<span>¥{{ orderResult.price }}</span></div>
			
			<div class="btn-ul" >
				<!-- <div class="btn-li clrcle" @click="handleToOrder" >查看订单</div> -->
				<div class="btn-li" @click="handleToHome" >回到首页</div>
			</div>
		</div>
		
		<!-- 失败 -->
		<div 
		v-if="status == 2"
		class="result-box" >
			<img class="pay-icon" :src="payFailIcon" >
			<div class="pay-order-desc fail"  >订单支付失败</div>
			<div class="pay-type" style="text-align: center;padding-left: 0;" >请尽快完成付款</div>
			<div class="pay-type" style="text-align: center;padding-left: 0;"  >否则订单将会被系统取消</div>
			
			<div class="btn-ul" >
				<!-- <div class="btn-li clrcle" @click="handleToOrder" >查看订单</div> -->
				<div class="btn-li" @click="handleToPay"  >重新付款</div>
			</div>
		</div>
		
		
		<div v-if="status == 1 || status == 2" class="tip-msg" >
			<div class="tip-msg-li" >温馨提示: </div>
			<div class="tip-msg-li" >水元万相APP不会以订单异常、系统异常为由要求您点击任何网址链接进行退款操作。</div>
		</div>
		
		
	</div>
</template>

<script>
	import { payFailIcon, paySuccessIcon } from '@/tool/static-img';
	import { ORDER_VERIFY } from '@/api/home';
	export default {
		data() {
			return {
				payFailIcon, paySuccessIcon,
				orderResult: null,
				status: 0
			}
		},
		
		created() {
			const orderResult = JSON.parse(localStorage.getItem('orderResult'))
			this.orderResult = orderResult;
			if(this.$route.query.status == 1) {
				this.status = 1;
			}else {
				this.getOrderResult();
			}
		},
		methods:{
			onClickLeft() {
				if(this.$route.query.status == 1) {
					this.$router.back()
				}else {
					this.$router.replace({
						name: 'home'
					})
				}
			},
			handleToOrder() {
				this.$router.replace({
					name: 'orderList'
				})
			},
			handleToHome() {
				this.$router.replace({
					name: 'home'
				})
			},
			// 重新付款
			handleToPay() {
				if(this.orderResult.order_id) {
					// 子单
					this.$router.push({
						name: 'levelCashier',
						query:{
							order_id: this.orderResult.order_id
						}
					})
					
				}else {
				  // 走缓存
				  this.$router.push({
				  	name: 'levelCashier'
				  })
				}
			},
			getOrderResult() {
				this.$http.post(ORDER_VERIFY+this.orderResult.trade_no)
					.then(res => {
						console.log(res.data, '订单验证')
						this.status = 1;
					})
					.catch(() => {
						
						this.status = 2;
					})
				
			}
		}
		
	}
</script>

<style lang="scss" >
	.home-pay-result-wrap{
		position: relative;
		min-height: 100vh;
		padding-top: 62px;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
		    color: #333333;
		}
		.van-nav-bar__arrow{
		    font-size: 20px;
		}
		.van-hairline--bottom::after{
		    display: none;
		}
		.result-box{
			margin-top: 0.48rem;
			.pay-icon{
				display: block;
				width: 1.2rem;
				height: 1.2rem;
				margin: auto;
			}
			.pay-order-desc{
				height: 0.5rem;
				margin-top: 0.32rem;
				line-height: 0.5rem;
				font-weight: 500;
				font-size: 0.36rem;
				color: #01CC4E;
				text-align: center;
				&.fail{
					color: #F9301B;
				}
			}
			.pay-type{
				height: 0.4rem;
				margin-top: 0.24rem;
				padding-left: 2.36rem;
				line-height: 0.4rem;
				font-size: 0.28rem;
				font-weight: 400;
				color: #999999;
				span{
					font-weight: 500;
					color: #333333;
				}
			}
		}
		
		.btn-ul{
			display: flex;
			padding: 0 0.32rem;
			margin-top: 0.72rem;
			justify-content:center;
			.btn-li{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 3.28rem;
				height: 0.88rem;
				font-size: 0.32rem;
				color: #ffffff;
				background: linear-gradient(270deg, #1261E2 0%, #4A89EC 100%);
				// border:1px solid #FF6200;
				border-radius: 0.16rem;
				&.clrcle{
					color: #FF6200;
					background-color: #ffffff;
					border: 1px solid rgba(255,98,0,0.5);
				}
			}
		}
		
		.tip-msg{
			margin-top: 0.8rem;
			padding: 0 0.32rem;
			.tip-msg-li{
				line-height: 0.34rem;
				font-size: 0.24rem;
				font-weight: 400;
				color: #999999;
			}
		}
	}
</style>
